<template>
	<view class="storeWrapper">
		<view class="contentWrapper" v-if="!isEmpty">
			<view class="listWrapper">
				<view v-for="(item,index) in shopList" class="item">
					<view class="inblk item-barcode">商品号:{{item.barcode}}</view>
					<view class="inblk item-title">{{item.title}}</view>
					<view class="inblk item-price">¥{{((item.price*item.num)/100).toFixed(2)}}</view>
					<view class="opWrapper" v-if="item.weight == 0">
						<view class="inblk xx sub" :class="{'disable':item.num==1}" v-on:click="bindSub(index)">−</view>
						<view class="inblk xx num">{{item.num}}</view>
						<view class="inblk xx add" v-on:click="bindAdd(index)">+</view>
					</view>
					<view class="opWrapper" v-if="item.weight != 0">
						<view>{{(item.weight).toFixed(3)}}kg</view>
					</view>
					<image class="item-del" src="../../static/del.png" v-on:click="bindDel(index)"></image>
				</view>
			</view>
			<view class="payWrapper">
				<view class="inblk pay-total">总额:¥{{(total/100).toFixed(2)}}, 共{{count}}件商品</view>
				<view class="inblk pay-pay">
					<text>实付:</text>
					<text class="amount">¥{{(total/100).toFixed(2)}}</text>
				</view>
				<view class="pay-btn" v-on:click="bindPay">去支付</view>
			</view>
		</view>
		<view class="emptyWrapper" v-if="isEmpty">
			<view class="empty-title">购物流程</view>
			<view class="empty-options">
				<view class="empty-option">
					<view class="empty-option-num">1</view>
					<view class="empty-option-text">点击扫一扫</view>
					<view class="empty-option-text">扫描商品条码</view>
				</view>
				<image mode="aspectFit" class="empty-arrow" src="../../static/arrow_link.png"></image>
				<view class="empty-option">
					<view class="empty-option-num">2</view>
					<view class="empty-option-text">点击去支付</view>
					<view class="empty-option-text">完成支付</view>
				</view>
				<image mode="aspectFit" class="empty-arrow" src="../../static/arrow_link.png"></image>
				<view class="empty-option">
					<view class="empty-option-num">3</view>
					<view class="empty-option-text">点击开门</view>
					<view class="empty-option-text">离开店铺</view>
				</view>
			</view>
		</view>
		<view class="headerWrapper">
			<view class="store-name">{{storename}}</view>
			<view class="persionWrapper">
				<image class="avatar" :src="avatar"></image>
				<view class="inblk name">{{username}}</view>
				<!-- <view class="inblk phone">{{phone}}</view> -->
				<view class="inblk search" v-on:click="onKefu">呼叫客服</view>
				<!-- <view class="inblk kefu">呼叫客服</view> -->
			</view>
		</view>

		<view class="scanBWrapper">
		</view>
		<view class="bottomWrapper bottom">
			<view class="scanWrapper" v-on:click="bindScan()">
				<image class="scan-icon" src="../../static/saoyisaobai.png"></image>
				<view class="scan-title">扫一扫</view>
			</view>
			<view class="btn open" v-on:click="bindOpen()">
				<image mode="aspectFit" class="btn-icon" src="../../static/kaimen.png"></image>
				<view class="btn-title">开门</view>
			</view>
			<view class="btn wode" v-on:click="bindMine()">
				<image mode="aspectFit" class="btn-icon" src="../../static/wode.png"></image>
				<view class="btn-title">我的</view>
			</view>
		</view>
		
		<leavePopup v-if="isShowLeave" v-on:leave="bindLeave()" v-on:keep="bindKeep()"></leavePopup>
	</view>
</template>

<script>
	import common from '../../common/common.js';
	import http from '../../common/http.js';
	import leavePopup from '../../components/leave.vue'
	export default {
		components:{leavePopup},
		data() {
			return {
				isEmpty:true,
				isShowLeave:false,
				"dsn":"",
				"avatar":"",
				"storename":"安阳暗河超市",
				"username":"小胖",
				"phone":"133333333",
				"total":"0.0", //商品总价格
				"count":"0", //商品总数量
				"shopList":[
					
				]
			}
		},
		onLoad (options) {
			this.phone = wx.getStorageSync("phone")
			this.dsn = options.dsn
			var self = this;
			common.getUserInfo((res)=>{
				self.avatar = res.avatarUrl
				self.username = res.nickName
			})
			
			// {
			//     "Id": 1,
			//     "Uid": 1,
			//     "Location": "23",
			//     "Name": "安阳某超市",
			//     "Address": "安阳某超市什么什么路什么什么街",
			//     "Rate": 600,
			//     "Creatime": 123123123
			// }
			http.get("/storeinfo", {"dsn":this.dsn}, (res)=>{
				self.storename = res["Name"]
			})
			this.refreshAmount()
		},
		methods: {
			decryptPhoneNumber(e) {
				console.log(e)
			},
			bindLeave(){
				this.leave()
			},
			bindKeep(){
				this.isShowLeave = false
			},
			bindScan() {
				var self = this
				// self.requestGoodInfo('2001492043609')
				// return
				uni.scanCode({
					onlyFromCamera:true,
					success(res) {
						self.requestGoodInfo(res.result)
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							icon:'none',
							title:"请重新扫描或联系客服"
						})
					}
				})
			},
			requestGoodInfo(barcode) {
				var self = this
				http.get("/goods", {"dsn":this.dsn, "barcode":barcode}, (r)=>{
					if (r["Id"] == 0) {
						uni.showToast({
							icon:"none",
							title:"商品条码错误"
						})
						return
					}
					
					//判断是否存在barcode
					var findIndex = -1
					for (var index=0;index<self.shopList.length;index++) {
						if (self.shopList[index]["barcode"] == r["BarCode"]) {
							findIndex = index
						}
					}
					
					if (r["Nums"] > 0) { //生鲜品类，显示kg
						self.addFreshGood(findIndex, r)
					} else { //普通品类
						self.addNormalGood(findIndex, r)
					}
					
					
					//提示添加成功
					wx.showToast({
						title:'添加成功',
						icon:'none'
					})
					self.refreshAmount()
				})
			},
			addNormalGood(findIndex, r) { //普通品类
				console.log("addNormalGood")
				var self = this 
				var nShopList = self.shopList
				if (findIndex == -1) {
					nShopList.push({
						"barcode":r["BarCode"],
						"price":r["Price"],
						"num":1,
						"title":r["ProName"],
						"id":r["Id"],
						"weight":0,
						"type":0
					})
				}else{
					nShopList[findIndex]["num"]++
				}
				self.shopList = nShopList
			},
			addFreshGood(findIndex, r) { //生鲜品类
				console.log("addFreshGood")
				var self = this 
				var nShopList = self.shopList
				var price = r["Nums"]*r["Price"]
				var weight = r["Nums"]
				if (findIndex == -1) {
					nShopList.push({
						"barcode":r["BarCode"],
						"price":price,
						"num":1,
						"title":r["ProName"],
						"id":r["Id"],
						"weight":weight,
						"type":1
					})
				}else{
					var old_weight = parseFloat(nShopList[findIndex]["weight"])
					var old_price = parseFloat(nShopList[findIndex]["price"])
					
					nShopList[findIndex]["weight"]=old_weight+weight
					nShopList[findIndex]["price"]=old_price+price
				}
				self.shopList = nShopList
			},
			bindSub(index) {
				if (this.shopList[index]["num"] == 1) {
					return
				}
				this.shopList[index]["num"] -=1
				this.refreshAmount()
			},
			bindAdd(index) {
				this.shopList[index]["num"] +=1
				this.refreshAmount()
			},
			bindOpen() {
				this.isShowLeave = true	
			},
			leave() {
				var self = this
				http.post("/user/leave", {"dsn":this.dsn}, (res)=>{
					self.isShowLeave = false
					uni.redirectTo({
						url:"../index/index"
					})
				}, "正在开门")
			},
			bindMine() {
				uni.navigateTo({
					url:"../mine/mine"
				})
			},
			bindDel(index) {
				var self = this;
				var item = this.shopList[index]
				uni.showModal({
					title:"确定删除?",
					content:item["title"],
					confirmText:"确定",
					cancelText:"取消",
					success(res) {
						if (res.confirm) {
							self.shopList.splice(index,1)
							self.refreshAmount()
						}
					}
				})
				
			},
			refreshAmount() {
				var total = 0
				var count = 0
				for (var i=0;i<this.shopList.length;i++) {
					var item = this.shopList[i]
					total = total+item.price*item.num
					count += item.num
				}
				this.total = total
				this.count = count
				
				this.isEmpty = this.shopList.length == 0
			},
			bindPay() {
				if (this.shopList.length == 0) {
					uni.showToast({
						icon:"none",
						title:"您还没有选购商品"
					})
					return
				}
				
				this.doPay()
			},
			doPay(){
				var proList = []
				var price = 0
				var self = this
				for (var i=0;i<this.shopList.length;i++) {
					var pid = this.shopList[i]["id"]
					if (this.shopList[i]['type'] == 1) { //生鲜
						var weight = this.shopList[i]["weight"]
						proList.push({
							"Productid":pid,
							"Nums":weight
						})
					}else{
						var nums = this.shopList[i]["num"]
						price+=this.shopList[i]["price"]*nums
						proList.push({
							"Productid":pid,
							"Nums":nums
						})
					}
					
				}
				http.post("/order/sub", {"proList":JSON.stringify(proList), "dsn":this.dsn}, (r)=>{
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						"provider": 'wxpay',
						"nonceStr": r.nonceStr,
						"package": r.package,
						"timeStamp": r.timeStamp,
						"paySign": r.paySign,
						"signType": r.signType,
						"orderInfo": r.order_id,
						success: function (res) {
							self.payDone()
						},
						fail: function (err) {
							if ("requestPayment:fail cancel" == err.errMsg) {
								wx.showToast({
									icon:'none',
									title:"支付取消"
								})
							}else{
								wx.showToast({
									icon:'none',
									title:"支付失败,请联系客服"
								})
							}
							
						},
					})
					// #endif
					
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						"provider":"alipay",
						"orderInfo":r.trade_no,
						success(res){
							console.log(res)
							if (res.resultCode == 6001){
								wx.showToast({
									icon:'none',
									title:"支付取消"
								})
							}else{
								self.payDone()
							}
							
						},
						fail(err) {
							wx.showToast({
								icon:'none',
								title:"支付失败,请联系客服"
							})
						}
					})
					// #endif
				})
			},
			payDone() {
				this.shopList = []
				wx.showToast({
					"title":"支付完成",
					icon:'none'
				})
				this.isShowLeave = true
				this.total = "0.0"
				this.count = "0"
				this.isEmpty = true
			},
			onKefu() {
				common.showKefu()
			}
		}
	}
</script>

<style>
	.headerWrapper {
		background-color: #52CBC6;
		height: 150px;
		position: fixed;
		width: 100%;
		padding-top: 40px;
		box-sizing: border-box;
	}
	.store-name {
		font-size: 20px;
		padding-top: 10px;
		box-sizing: border-box;
		padding-left: 15px;
		color: white;
		font-weight: bolder;
		height: 50px;
	}
	.persionWrapper {
		background-color: white;
		height: 80px;
		margin-left: 15px;
		margin-right: 15px;
		border-radius: 10px;
		box-shadow: 0px -1px 10px rgba(0,0,0,0.2); 
		position: relative;
	}
	.persionWrapper .avatar {
		position: absolute;
		width: 50px;
		height: 50px;
		background-color: #f6f6f6;
		margin-left: 15px;
		top: 50%;
		margin-top: -25px;
		border-radius: 25px;
	}
	.persionWrapper .name {
		position: absolute;
		left: 75px;
		top: 30px;
	}
	
	.persionWrapper .phone {
		position: absolute;
		top: 40px;
		left: 70px;
		color: #333333;
		
	}
	.persionWrapper .search {
		color: #666666;
		position: absolute;
		font-size: 14px;
		height: 30px;
		line-height: 25px;
		right: 15px;
		border-radius: 5px;
		border: 1px solid #666666;
		top: 50%;
		margin-top: -32px;
		box-sizing: border-box;
		padding: 2px 5px;
	}
	.persionWrapper .kefu {
		background-color: #149707;
		color: white;
		position: absolute;
		font-size: 14px;
		height: 30px;
		right: 15px;
		border-radius: 5px;
		margin-top: 2px;
		top: 50%;
		box-sizing: border-box;
		padding: 2px;
	}
	.contentWrapper {
		position: absolute;
		margin-top: 180px;
		width: 100%;
		max-height: 100%;
		box-sizing: border-box;
	}
	.listWrapper {
		overflow-y: scroll;
		overflow: hidden;
		padding-bottom: 170px;
		
	}
	.item {
		height: 50px;
		border-bottom: 1px solid #f6f6f6;
		display: flex;
		align-items: center;
		position: relative;
		margin: 0px 15px;
	}
	.item-icon {
		width: 30px;
		height: 30px;
		background-color: red;
		margin-right: 10px;
	}
	.item-barcode {
		color: #999999;
		position: absolute;
		font-size: 12px;
		top: 5px;
	}
	.item-title {
		position: absolute;
		width: 100%;
		font-size: 16px;
		font-weight: bolder;
		bottom: 5px;
	}
	.item-del {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
	}
	.item-price {
		position: absolute;
		left: 50%;
		color: red;
		font-size: 14px;
	}
	.payWrapper {
		position: fixed;
		background-color: white;
		bottom: 75px;
		height: 75px;
		width: 100%;
		border-top: 1px solid #dedede;
	}
	
	.open {
		left: 30px;
		color: #52CBC6;
	}
	.wode {
		right: 30px;
		color: #52CBC6;
	}
	.btn-icon {
		width: 30px;
		height: 30px;
	}
	.bottom {
		width: 100%;
		height: 80px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px -1px 8px rgba(0,0,0,0.1); 
		z-index: 10;
		background-color: white;
	}
	.scanBWrapper {
		
		border-radius: 50px;
		box-shadow: 0px -1px 20px rgba(0,0,0,0.2);  
		background-color: white;
		width: 100px;
		height: 100px;
		position: fixed;
		bottom: -10px;
		left: 50%;
		margin-left: -50px;
		opacity: 1;
		z-index: 0;
	}
	.scanWrapper {
		width: 80px;
		height: 80px;
		border: 10px solid white;
		border-radius: 50%;
		background-color: #57D7D2;
		color: white;
		position: absolute;
		left: 50%;
		margin-left: -50px;
		margin-top: -15px;
		text-align: center;
	}
	.scan-icon {
		position: absolute;
		width: 30px;
		height: 30px;
		top: 50%;
		left: 50%;
		margin-left: -15px;
		margin-top: -25px;
	}
	.scan-title {
		position: absolute;
		font-size: 14px;
		width: 100%;
		text-align: center;
		top: 50%;
		margin-top: 8px;
		color: white;
		font-weight: bold;
	}
	
	.pay-total {
		position: absolute;
		left: 5px;
		top: 10px;
		color: #999999;
		font-size: 14px;
	}
	
	.pay-btn {
		width: 80px;
		height: 35px;
		text-align: center;
		border-radius: 5px;
		line-height: 35px;
		background-color: #FAC32B;
		color: #222222;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -25px;
	}
	
	.pay-pay {
		position: absolute;
		top: 30px;
		left: 5px;
		font-weight: 300;
	}
	.amount {
		color: red;
		font-size: 18px;
	}
	.opWrapper {
		position: absolute;
		right: 50px;
	}
	.item .xx {
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background-color: #CCCCCC;
		margin-right: 1px;
		font-size: 15px;
	}
	.item .add {
		
	}
	.item .sub {

	}
	.item .num {
		
	}
	.item .disable {
		background-color: #f6f6f6;
	} 
	.mask {
		background-color: rgba(0,0,0, 0.2);
	}
	.emptyWrapper {
		position: absolute;
		margin-top: 180px;
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		padding: 0px 10px;
	}
	.empty-title {
		width: 100%;
		text-align: center;
		color: #bbbbbb;
		font-weight: bold;
		font-size: 20px;
		height: 40px;
		line-height: 40px;
		margin-top: 10px;
	}
	.empty-options {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}
	.empty-option {
		/* width: 80px; */
		height: 70px;
		display: flex;
		flex-direction: column;
		align-content: space-around;
		color: #bbb;
		text-align: center;
		align-items: center;
	}
	.empty-option-text {
		font-size: 13px;
	}
	.empty-option-num {
		width: 20px;
		height: 20px;
		border-radius: 10px;
		font-size: 13px;
		line-height: 20px;
		background-color: #FAC32B;
		color: white;
		margin-bottom: 8px;
	}
	.empty-arrow {
		width: 40px;
		max-width: 25px;
		height: 70px;
		flex: 1;
		
	}
</style>
